
<div class="page-content">
    <!-- BEGIN PAGE HEADER-->
    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN PAGE TITLE & BREADCRUMB-->
            <h3 class="page-title">
                未销假 <small>请假管理系统</small>
            </h3>
            <ul class="page-breadcrumb breadcrumb">
                <li>
                    <i class="fa fa-home"></i>
                    <a href="index.html">请假记录</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li>
                    <a href="#">未销假</a>
                </li>
            </ul>
            <!-- END PAGE TITLE & BREADCRUMB-->
        </div>
    </div>
    <!-- END PAGE HEADER-->
    <!-- BEGIN PAGE CONTENT-->
    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN EXAMPLE TABLE PORTLET-->
            <div class="portlet box light-grey">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-globe"></i>未销假
                    </div>
                    <div class="tools">
                        <!--<a href="javascript:;" class="collapse"></a>-->
                        <!--<a href="#portlet-config" data-toggle="modal" class="config"></a>-->
                        <!--<a href="javascript:;" class="reload"></a>-->
                        <!--<a href="javascript:;" class="remove"></a>-->
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="table-toolbar">
                        <div class="btn-group">
                            <a  ui-sref="applications.new" id="sample_editable_1_new" class="btn green">
                                请假 <i class="fa fa-plus"></i>
                            </a>
                        </div>
                        <div class="btn-group pull-right">
                            <button class="btn dropdown-toggle" data-toggle="dropdown">Tools <i class="fa fa-angle-down"></i>
                            </button>
                            <ul class="dropdown-menu pull-right">
                                <li>
                                    <a href="#">Print</a>
                                </li>
                                <li>
                                    <a href="#">Save as PDF</a>
                                </li>
                                <li>
                                    <a href="#">Export to Excel</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div id="my-confirm" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="my-confirmLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                                    <h4 class="modal-title">Confirm Header</h4>
                                </div>
                                <div class="modal-body">
                                    <p>
                                        Body goes here...
                                    </p>
                                </div>
                                <div class="modal-footer">
                                    <button id="close" class="btn default" data-dismiss="modal" aria-hidden="true">Close</button>
                                    <button id="confirm" data-dismiss="modal" class="btn blue">Confirm</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <table class="table table-striped table-bordered table-hover" id="instrument-table">
                        <thead>
                        <tr>
                            <th class="table-checkbox">
                                <input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes"/>
                            </th>
                            <th>
                                ID
                            </th>
                            <th>
                                员工编号
                            </th>
                            <th>
                                请假类型
                            </th>
                            <th>
                                请假时长
                            </th>
                            <th>
                                状态
                            </th>
                            <th>
                                创建时间
                            </th>
                            <th>
                                操作
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="odd gradeX" ng-repeat="app in applications">
                            <td>
                                <input type="checkbox" class="checkboxes" value="1"/>
                            </td>
                            <td ng-bind="app.id">
                            </td>
                            <td ng-bind="app.uid">
                            </td>
                            <td ng-bind="app.vid|applicationType">
                            </td>
                            <td ng-bind="app.count|applicationCount">
                            </td>
                            <td ng-bind="app.status|applicationStatus">
                            </td>
                            <td ng-bind="app.createTime">
                            </td>
                            <td>
                                <a  ui-sref="applications.clear({appId:{{app.id}} })"  role="button" class="btn blue">销假</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
    </div>
    <!-- END PAGE CONTENT-->
</div>

<script>

    function init() {

        if (!jQuery().dataTable) {
            return;
        }

        // begin first table

        $('#instrument-table').dataTable({
            "aoColumns": [
                {"bSortable": false},
                null,
                {"bSortable": false},
                {"bSortable": false},
                {"bSortable": false},
                {"bSortable": false},
                {"bSortable": false},
                {"bSortable": false}
            ],
            "aLengthMenu": [
                [5, 15, 20, -1],
                [5, 15, 20, "All"] // change per page values here
            ],
            // set the initial value
            "iDisplayLength": 5,
            "sPaginationType": "bootstrap",
            "oLanguage": {
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "搜索: &nbsp",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            },
            "aoColumnDefs": [{
                'bSortable': false,
                'aTargets': [0]
            }
            ]
        });

        jQuery('#instrument-table .group-checkable').change(function () {
            var set = jQuery(this).attr("data-set");
            var checked = jQuery(this).is(":checked");
            jQuery(set).each(function () {
                if (checked) {
                    $(this).attr("checked", true);
                    $(this).parents('tr').addClass("active");
                } else {
                    $(this).attr("checked", false);
                    $(this).parents('tr').removeClass("active");
                }
            });
            jQuery.uniform.update(set);
        });

        jQuery('#instrument-table tbody tr .checkboxes').change(function () {
            $(this).parents('tr').toggleClass("active");
        });

        jQuery('#instrument-table_wrapper .dataTables_filter input').addClass("form-control input-medium"); // modify table search input
        jQuery('#instrument-table_wrapper .dataTables_length select').addClass("form-control input-xsmall"); // modify table per page dropdown
        //jQuery('#sample_1_wrapper .dataTables_length select').select2(); // initialize select2 dropdown
    }

    function deleteType(id){
        $.ajax({
            url: rootUrl+'${pageContext.request.contextPath}/news/'+id,

//             contentType:"application/json",
            type: 'delete',
            dataType: 'json'
//             data:JSON.stringify(newApply)
        }).success(function(data){
            loadTable();
        }).error(function(){
            alert("删除失败");
        });
    }

    function deleteClick(id,ele) {
        var $this = $(ele);

        $('#my-confirm').modal({});

        $("#my-confirm").find("#confirm").on("click", function (e) {
            alert(id);
//            alert($this.attr("id"))
            $(e.target).off("click")
        });
    }

    jQuery(document).ready(function() {
        init();
    });
</script>